<template>
	<div class="content-header">
		<el-scrollbar>
			<el-row style="overflow: auto;">
				<el-card class="rec-card-whole">
					<template #header>
						<div class="rec-title rec-header">
							<span>
								推荐记录
							</span>
							<el-select v-model="recValue" placeholder="审核状态">
								<el-option value="0" label="全部"></el-option>
								<el-option value="1" label="审核中"></el-option>
								<el-option value="2" label="已通过"></el-option>
								<el-option value="3" label="未通过"></el-option>
							</el-select>
						</div>
					</template>

					<div style="min-height: 80px;" v-loading='list_loading' element-loading-text="拼命加载资源中"
						element-loading-background="rgba(255, 255, 255, 1)">
						<el-scrollbar max-height="500px">
							<div v-for="(item,index) in recommendRecord" :key="index" class="rec-list-item">
								<!-- meta信息部分 -->
								<div class="rec-card-meta">
									<div class="rec-card-header">
										<img width="48" height="48" :src="item.icon" class="image" />
									</div>
									<div class="rec-card-content">
										<div class="rec-card-title">
											<el-link target="_blank" :href="getRootPath()+'/detail?rid='+item.recommendId" :underline="false">
												{{item.recommendName}}
											</el-link>
										</div>
										<div class="rec-card-description">
											{{item.description}}
										</div>
									</div>
								</div>
								<!-- 按钮操作部分 -->
								<div class="rec-card-action">
									<el-tag type="success" size="medium" effect="dark" v-if="item.status === 1">已发布
									</el-tag>
									<el-tag size="medium" effect="dark" v-else>审核中</el-tag>
								</div>
							</div>
						</el-scrollbar>
						<el-pagination background layout="prev, pager, next" :total="listNum" :page-size="pageSize"
							:current-page="currentPage" @current-change="pageChange" v-show="!infoStatus">
						</el-pagination>
					</div>

					<el-empty description="您还没有推荐记录哦~" v-show="infoStatus">
						<el-button type="primary" @click.native="goRecommend()">我要推荐资源</el-button>
					</el-empty>
				</el-card>
			</el-row>

		</el-scrollbar>
	</div>
</template>

<script lang="ts">
	import Qs from 'qs';
	import {
		ElMessage
	} from 'element-plus';
	export default {
		created() {
			// setTimeout(()=>{
			// 	this.getRecords()
			// },3000)
			this.getRecords();
		},

		data() {
			return {
				infoStatus: false,
				recValue: '',
				list_loading: true,
				listNum: 10,
				currentPage: 1,
				pageSize: 6,
				recommendRecord: [],
			}
		},
		methods: {
			pageChange(currentPage) {
				this.currentPage = currentPage;
				this.recommendRecord = [];
				this.list_loading = true;
				this.getRecords(currentPage, 6);
			},
			getRecords(r_pageNum = 1, r_pageSize = 6) {
				let that = this;
				//发送请求
				this.$axios({
					url: 'http://localhost:8080/Recommend/getMyRecommends',
					method: 'post',
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return Qs.stringify(data)
					}],
					headers: {
						// 'Content-Type': 'application/json',
						'token': localStorage.pg_token
					},
					data: {
						userId: localStorage.pg_username,
						pageNum: r_pageNum,
						pageSize: r_pageSize,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.data.length === 0 || result.code === 110) {
							that.infoStatus = true;
							that.list_loading = false;
							return data;
						}
						that.recommendRecord = result.data;
						if (result.code === 200) {
							// ElMessage({
							// 	message: '获取记录成功',
							// 	type: 'success',
							// });
							// that.$router.go(0);
						} else {
							ElMessage({
								message: result.msg,
								type: 'error',
							});
							that.loginStatus = false;

						}
						that.list_loading = false;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");

					} else if (error.request) {
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
					that.pageView = false;
					that.list_loading = false;
					that.infoStatus = true;
				});
			},
			getRootPath() {
			    //获取当前网址，如： http://localhost:8088/test/test.jsp
			    let curPath = window.document.location.href;
			    //获取主机地址之后的目录，如： test/test.jsp
			    let pathName = window.document.location.pathname;
			    let pos = curPath.indexOf(pathName);
			    //获取主机地址，如： http://localhost:8088
			    let localhostPath = curPath.substring(0, pos);
			    //获取带"/"的项目名，如：/test
			    let projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
			    return (localhostPath);//发布前用此4
			},
			goRecommend() {
				this.$router.push('/addResource')
			},
		}

	}
</script>

<style>
	.rec-card-meta {
		display: flex;
		align-items: center;
	}

	.rec-card-action {
		margin-right: 1.5rem;
	}

	.rec-list-item {
		margin-bottom: 35px;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.rec-card-content {
		text-align: left;
		margin: 0.125rem 0 0 0;
	}

	.rec-card-title {
		margin-bottom: 0.3125rem;
	}

	.rec-card-header {
		margin-right: 1rem;
	}

	.rec-card-description {
		/* margin: 0 0 0 15px; */
		color: #999999;
		font-size: 14px;
	}

	.rec-title {
		color: #8b8b8b;
		font-size: 20px;
		margin-top: 0.3125rem;
	}

	.rec-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	.image_avatar {
		border-radius: 50%;
	}

	.card-page {
		width: -webkit-fill-available;
		cursor: default !important;
		margin: 0 0.9375rem 0 0.9375rem;
		border-radius: 0.3125rem;
	}

	.el-row {
		height: auto;
	}

	.container {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		overflow: auto;
	}




	.card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}

	.card_content {
		padding: 10px;
		color: #999999;
		font-size: 14px;
		text-align: center;
	}

	.card_content_time {
		/* padding: 10px; */
		color: #999999;
		font-size: 13px;
		text-align: left;
	}



	.content-header {
		display: flex;
		flex-grow: 1;
		margin: 0 5px 0 5px;
		flex-direction: column;
		/* flex-wrap: wrap; */
		/* background-color: #FFF; */
	}





	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rec-card-whole {
		height: max-content;
		width: 100%;
		padding: 0 3.125rem;
		margin: 0 1.25rem;
	}

	/* .el-page-header__left{
		width: 0;
		display: none;
	} */
</style>
